<template>
  <div class="app-container">
    <div>
      <el-divider content-position="left">订单基础信息</el-divider>
      <el-row :gutter="24">
        <el-col :span="6">订单编号：{{orderX.orderNum}}</el-col>
        <el-col :span="6">订单类型：{{orderTypeFormat(orderX.orderType)}}</el-col>
        <el-col :span="6">订单状态：{{orderStateFormat(orderX.orderState)}}</el-col>
        <el-col :span="6">下单时间：{{parseTime(orderX.gmtTime)}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">车牌号：{{orderX.carNum}}</el-col>
        <el-col :span="6">联系人：{{addrForm.contactName || '--'}}</el-col>
        <el-col :span="6">联系电话：{{addrForm.contactMobile || '--'}}</el-col>
        <el-col :span="6">预约时间：{{parseTime(orderX.bookTime)}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">取还地址：{{addrForm.pickFullAddr || '--' + ' ' + addrForm.pickAddr || '--' + ' ' + addrForm.addrDetail || '--'}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">检测结果：{{checkResultFormat(orderX.checkResult)}}</el-col>
        <el-col :span="6">订单备注：{{orderX.remark}}</el-col>
      </el-row>
      <el-divider content-position="left">订单费用信息</el-divider>
      <el-row :gutter="24">
        <el-col :span="6">订单金额：{{orderX.orderPrice}}</el-col>
        <el-col :span="6">实付金额：{{orderX.actPrice}}</el-col>
        <el-col :span="6">检测费用：{{orderX.stationFee}}</el-col>
        <el-col :span="6">代驾费用：{{orderX.driverFee}}</el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">优惠金额：{{orderX.couponFee}}</el-col>
        <el-col :span="6">是否使用优惠券：{{useCouponFormat(orderX.useCoupon)}}</el-col>
      </el-row>
      <el-divider content-position="left">订单所属会员信息</el-divider>
      <el-row :gutter="24">
        <el-col :span="6">会员昵称：{{memberForm.nickName}}</el-col>
        <el-col :span="6">会员手机号：{{memberForm.mobile}}</el-col>
      </el-row>
      <el-divider content-position="left">订单所属检测站信息</el-divider>
      <el-row :gutter="24">
        <el-col :span="6">检测站名称：{{stationForm.name}}</el-col>
        <el-col :span="6">检测站手机号：{{stationForm.mobile}}</el-col>
        <el-col :span="12">检测站位置：{{stationForm.locPoi}}</el-col>
      </el-row>
      <el-divider content-position="left">订单所属代驾司机信息</el-divider>
      <el-row :gutter="24">
        <el-col :span="6">司机姓名：{{driverForm.driverName}}</el-col>
        <el-col :span="6">司机手机号：{{driverForm.driverMobile}}</el-col>
      </el-row>
    </div>


  </div>
</template>

<script>
  import {getMember} from "@/api/member/member";
  import {getDriver} from "@/api/driver/driver";
  import {getStation} from "@/api/station/station";
  import {getOrderAddr} from "@/api/order/order";
  import defaultSettings from '@/settings'

  export default {
    name: "Order",
    props: {
      order: {
        type: Object
      }
    },
    data() {
      return {
        ossPre: defaultSettings.ossPreview,
        orderX: this.order,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 是否显示弹出层
        open: false,
        // 订单状态字典
        orderStateOptions: [],
        // 是否使用了优惠券字典
        useCouponOptions: [],
        // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典
        orderTypeOptions: [],
        // 检测结果   1合格   0不合格字典
        checkResultOptions: [],
        // 是否已支付   0为支付   1已支付字典
        isPayOptions: [],
        // 支付通道  1微信  2支付宝字典
        payChannelOptions: [],
        // 查询参数
        // 表单参数
        memberForm: {},
        driverForm: {},
        stationForm: {},
        addrForm: {}
      };
    },
    created() {
      this.getDicts("order_state").then(response => {
        this.orderStateOptions = response.data;
      });
      this.getDicts("sys_is_enable").then(response => {
        this.useCouponOptions = response.data;
        this.isPayOptions = response.data;
      });
      this.getDicts("order_type").then(response => {
        this.orderTypeOptions = response.data;
      });
      this.getDicts("check_result").then(response => {
        this.checkResultOptions = response.data;
      });
      this.getDicts("pay_channel").then(response => {
        this.payChannelOptions = response.data;
      });
      if (this.orderX.memberId){
          this._getMember();
      }
      if (this.orderX.driverId){
          this._getDriver();
      }
      if (this.orderX.stationId){
          this._getStation();
      }
      if (this.orderX.id){
          this._getOrderAddr();
      }
    },
    mounted() {
      // this._getMember();
      // this._getDriver();
      // this._getStation();
      // this._getOrderAddr();
    },
    methods: {
      _getMember() {
        getMember(this.orderX.memberId).then(response => {
          this.memberForm = response.data;
        });
      },
      _getOrderAddr() {
        getOrderAddr(this.orderX.id).then(response => {
          this.addrForm = response.data;
        });
      },
      _getDriver() {
        getDriver(this.orderX.driverId).then(response => {
          this.driverForm = response.data;
        });
      },
      _getStation() {
        getStation(this.orderX.stationId).then(response => {
          this.stationForm = response.data;
        });
      },
      // 订单状态字典翻译
      orderStateFormat(data) {
        return this.selectDictLabel(this.orderStateOptions, data);
      },
      // 是否使用了优惠券字典翻译
      useCouponFormat(data) {
        return this.selectDictLabel(this.useCouponOptions, data);
      },
      // 订单类型 1六年免检 2 代驾审车  3 自驾审车字典翻译
      orderTypeFormat(data) {
        return this.selectDictLabel(this.orderTypeOptions, data);
      },
      // 检测结果   1合格   0不合格字典翻译
      checkResultFormat(data) {
        return this.selectDictLabel(this.checkResultOptions, data);
      },
      // 是否已支付   0为支付   1已支付字典翻译
      isPayFormat(data) {
        return this.selectDictLabel(this.isPayOptions, data);
      },
      // 支付通道  1微信  2支付宝字典翻译
      payChannelFormat(data) {
        return this.selectDictLabel(this.payChannelOptions, data);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      }
    }
  };
</script>
<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
